<template>
  <el-container>
    <el-header style="border:black">
      <el-col :span="14">
        <el-col :span="5">
          门诊挂号
        </el-col>
        <el-col :span="10" v-show="invoiceShow">
          <el-input v-model="invoiceNo" placeholder="发票号"/>
        </el-col>
        <el-col :span="5" v-show="invoiceShow">
          <el-button @click="getInvoiceNo">更新发票号</el-button>
        </el-col>
      </el-col>
      <el-col :span="10">
        <div class="top-right-btn">
          <el-tooltip class="item" effect="dark" content="挂号列表" placement="top">
            <el-button type="text" round icon="el-icon-edit" @click="modularShow='registerList'">挂号列表</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="挂号" placement="top">
            <el-button type="text" round icon="el-icon-edit" @click="handleAdd">挂号</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="读卡" placement="top">
            <el-button type="text" round icon="el-icon-edit" @click="openCardReading">读卡</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="重打" placement="top">
            <el-button type="text" round icon="el-icon-edit" @click="initForm">重打</el-button>
          </el-tooltip>
        </div>
      </el-col>
    </el-header>
    <el-main>
      <el-row v-show="componentShow('registerList')">
        <div class="app-container">
          <el-col :span="15">
            <el-col :span="5">
              <el-tag color="white">挂号信息列表</el-tag>
            </el-col>
            <el-col :span="14" :offset="1">
              <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
                <el-form-item prop="name">
                  <el-input
                    v-model="queryParams.name"
                    placeholder="病历号/姓名"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-col>
          <el-col :span="8">
            <div class="top-right-btn">
              <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                <el-button size="mini" circle icon="el-icon-refresh" @click="handleQuery"/>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
                <el-button size="mini" circle icon="el-icon-search" @click="showSearch=!showSearch"/>
              </el-tooltip>
            </div>
          </el-col>
          <el-table border v-loading="loading" :data="registrationList">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="id" align="center" v-if="show" prop="id"/>
            <el-table-column label="患者id" align="center" v-if="show" prop="pmsPatient.id"/>
            <el-table-column label="科室id" align="center" v-if="show" prop="deptId"/>
            <el-table-column label="排班id" align="center" v-if="show" prop="skdId"/>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  plain
                  @click="openReturnReading(scope.row)"
                  v-hasPermi="['dms:registration:edit']"
                  v-if="scope.row.status===1"
                >退号
                </el-button>
                <el-button
                  size="small"
                  plain
                  @click="openReturnReading"
                  v-hasPermi="['dms:registration:remove']"
                  v-if="scope.row.status===1"
                >补打
                </el-button>
                <el-button
                  size="small"
                  plain
                  @click="queryPayList(scope.row)"
                  v-hasPermi="['dms:registration:edit']"
                  v-if="scope.row.status===2"
                >缴费
                </el-button>
                <el-button
                  size="small"
                  plain
                  @click="queryRefundList(scope.row)"
                  v-hasPermi="['dms:registration:remove']"
                  v-if="scope.row.status===2"
                >退费
                </el-button>
                <el-button
                  size="small"
                  plain
                  v-hasPermi="['dms:registration:remove']"
                  v-if="scope.row.status===4"
                >无
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-tag :type='onColourLine[scope.row.status]'>{{onLine[scope.row.status]}}</el-tag>
              </template>

            </el-table-column>
            <el-table-column label="病历号" align="center" prop="pmsPatient.medicalRecordNo"/>
            <el-table-column label="姓名" align="center" prop="pmsPatient.name"/>
            <el-table-column label="性别" align="center" prop="pmsPatient.gender" :formatter="genderFormat"/>
            <el-table-column label="出生日期" align="center" prop="pmsPatient.dateOfBirth">
              <template slot-scope="scope">
                <span>{{parseTime(scope.row.pmsPatient.dateOfBirth, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="就诊日期" align="center" prop="attendanceDate" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.attendanceDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="看诊科目" align="center" prop="sysDept.deptName"/>
            <el-table-column label="就诊年龄" align="center" prop="patientAgeStr"/>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
        <!-- 退号弹出框 -->
        <el-dialog :title="returnTitle" :visible.sync="returnOpen" width="500px" append-to-body>
          <el-form ref="returnForm" :model="returnForm" :rules="rules" label-width="100px">
            <el-form-item label="发票Id" v-show="false">
              <el-input v-model="returnForm.id"></el-input>
            </el-form-item>
            <el-form-item label="挂号Id" v-show="false">
              <el-input v-model="returnForm.registrationId"></el-input>
            </el-form-item>
            <el-form-item label="排班id" v-show="false">
              <el-input v-model="returnForm.skdId"></el-input>
            </el-form-item>
            <el-form-item label="发票号">
              <el-input v-model="returnForm.invoiceNo" placeholder="发票号"></el-input>
            </el-form-item>
            <el-form-item label="冲红发票号">
              <el-input v-model="returnForm.redInvoiceNo" placeholder="冲红发票号"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitReturnForm">确 定</el-button>
            <el-button @click="returnCancel">取 消</el-button>
          </div>
        </el-dialog>
      </el-row>
        <!--挂号添加页面-->
      <add-registration ref="addRegistration" @addSuccessBack="addSuccessBack"  :invoiceNo="invoiceNo" :patientObject="patientObject" v-show="componentShow('addRegister')">
      </add-registration>
      <!--缴费页面-->
      <pay-list ref="pay" v-show="componentShow('payList')"   :invoiceNo="invoiceNo" @handleBack="handleBack">

      </pay-list>

      <refund-list ref="refund" v-show="componentShow('refundList')"  :newInvoiceNo="invoiceNo"  @handleBack="handleBack">

      </refund-list>
      <!-- 读卡对话框 -->
      <el-dialog :title="cardTitle" :visible.sync="open" width="500px" append-to-body>
        <el-tag type="info">身份证号</el-tag>
        <el-form ref="cardForm" :model="cardForm" :rules="rules" label-width="80px">
          <el-input v-model="cardForm.identificationNo" placeholder="请输入身份证号"/>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCardForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  import {RegistrationPatientList,handleBounce} from "@/api/dms/registration";
  import ScrollPane from "../../../layout/components/TagsView/ScrollPane";
  import Icons from "../../components/icons/index";
  import addRegistration from "./addRegistration";
  import payList from "./payList";
  import refundList from "./refundList";
  // 患者
  import {getPatientByIdentificationNo} from "@/api/pms/patient";
  // 发票
  import {queryInvoiceNo,queryByRegistrationId} from "@/api/bms/invoice_record";

  export default {
    name: "Registration",
    components: {Icons, ScrollPane, addRegistration,payList,refundList},
    data() {
      return {
        // 遮罩层
        loading: true,
        //隐藏
        show: false,
        // 模块隐藏
        modularShow: 'registerList',
        // 发票隐藏
        invoiceShow: false,
        // 状态的对应的值
        onLine: {"1": "未看诊", "2": "待收费", "3": "诊毕", "4": "已退号"},
        // 状态的对应的颜色
        onColourLine: {"1": "warning", "2": "danger", "3": "success", "4": "info"},
        // 选中数组
        ids: [],
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 就诊(门诊)信息(一个病人一个病历号，多次就诊，多次就诊信息)表格数据
        registrationList: [],
        // 弹出层标题
        cardTitle: "",
        // 退号弹出层标题
        returnTitle: "",
        // 是否显示弹出层
        open: false,
        // 推号弹出层
        returnOpen: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          medicalRecordNo: undefined
        },
        // 读卡表单
        cardForm: {},
        // 退号表单
        returnForm: {},
        //发票号
        invoiceNo: null,
        // 表单校验
        rules: {},
        // 患者对象
        patientObject:{},
        payParams:null,
      };
    },
    created() {
      this.getList();
    },
    watch: {
      // 监听姓名查询参数的变化
      'queryParams.name'(val) {
        // 将值赋给 病历号
        this.queryParams.medicalRecordNo = val;
      },
      // 监听组件的显示
      'modularShow'(val){
          if(val==="addRegister"||val==="payList" || val==="refundList") {
            this.invoiceShow=true;
          }else{
            this.invoiceShow=false;
          }
      }
    },
    methods: {
      /** 查询就诊(门诊)信息(一个病人一个病历号，多次就诊，多次就诊信息)列表 */
      getList() {
        this.loading = true;
        RegistrationPatientList(this.queryParams).then(response => {
          this.registrationList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      // 退号取消按钮
      returnCancel() {
        this.returnOpen = false;
      },
      // 读卡表单重置
      cardReset() {
        this.cardForm = {
          identificationNo: null
        };
        this.resetForm("cardForm");
      },
      // 退号表单重置
      returnReset() {
        this.returnForm = {
          registrationId:null,
          redInvoiceNo:null,
          invoiceNo:null,
          skdId:null,
          id:null
        };
        this.resetForm("returnForm");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 挂号按钮操作 */
      handleAdd() {
          this.modularShow='addRegister';
      },
      /** 打开读卡 */
      openCardReading() {
        this.cardReset();
        this.open = true;
        this.cardTitle = "读卡(获取用户身份证号)";
      },
      /** 打开退号 */
      openReturnReading(data) {
        this.returnReset();
        this.returnOpen = true;
        this.returnTitle = "退号";
        this.returnForm.skdId = data.skdId;
        this.returnForm.registrationId = data.id;
        this.queryByRegistrationId(data.id);
      },
      /** 读卡提交按钮 */
      submitCardForm() {
        // 表单验证
        this.$refs["cardForm"].validate(valid => {
          if (valid) {
            getPatientByIdentificationNo(this.cardForm.identificationNo).then(response => {
              if (response.data) {
                this.patientObject = response.data;
                this.msgSuccess("读卡成功");
                this.open = false;   //关闭读卡弹出框
                this.modularShow='addRegister'; //打开添加读卡页面
                this.getInvoiceNo();            //更新发票号
              } else {
                this.msgError("没有该身份证号");
              }
            });
          }
        })
      },
      /** 退号提交按钮 */
      submitReturnForm() {
        // 表单验证
        this.$refs["returnForm"].validate(valid => {
          if (valid) {
            handleBounce(this.returnForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("退号成功");
                // 弹窗关闭
                this.returnCancel();
                // 刷新列表
                this.getList();
              }
            });
          }
        })
      },
      /**性别格式转换*/
      genderFormat(row, column, cellValue) {
        if (cellValue === 0) {
          return "男"
        } else if (cellValue === 1) {
          return "女"
        }
      },
      /** 获取发票号*/
      getInvoiceNo() {
        queryInvoiceNo().then(response => {
          this.invoiceNo = response.data;
        });
      },
      /** 挂号成功回调*/
      addSuccessBack(){
        this.open = false;
        this.getList();
        this.invoiceNo=null;
        this.modularShow='registerList';
      },
      /** 重打按钮*/
      initForm(){
        // 调用子组件的方法
        this.$refs.addRegistration.reset();
        this.invoiceNo=null;
      },
      /** 根据挂号Id 获取发票Id*/
      queryByRegistrationId(registrationId){
        queryByRegistrationId(registrationId).then(response =>{
            this.returnForm.redInvoiceNo=response.data.invoiceNo;
            this.returnForm.invoiceNo=response.data.invoiceNo;
            this.returnForm.id=response.data.id;
        })
      },
      /**
       * 组件显示隐藏控制
       */
      componentShow(showName){
        return this.modularShow===showName;
      },
      // 查询缴费列表
      queryPayList(data){
        this.$refs.pay.getPayList(data);
        this.modularShow='payList';
      },
      // 查询退费列表
      queryRefundList(data){
        this.$refs.refund.getRefundList(data);
        this.modularShow='refundList';
      },
      /** 缴费退费回调 */
      handleBack(flag,viewName){
        if(flag){
          this.getInvoiceNo();
          this.invoiceNo=null;
        }else{
          this.modularShow=viewName;
        }
      }
    }
  };
</script>

<style scoped>
  .el-header {
    background-color: #f2f2f3;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .app-padding {
    padding: 10px;
  }
</style>
